{% extends "base.html" %}
{% load i18n %}
{% block head %}
    <title>{% trans "操作记录 | 蓝鲸智云" %}</title>
    {{ block.super }}
    <style>
        td {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            max-width: 300px; /*最大宽度*/
        }
    </style>
{% endblock %}


{% block content %}
    <div class="page-content" style="min-width: 80%">
        <ol class="breadcrumb detail-breadcrumb">
            <li class="all pro-all"><a href="{{ SITE_URL }}">主页</a></li>
            <li><a href="{{ SITE_URL }}record_page/">操作记录</a></li>
        </ol>

        <div class="bk-collapse-panel">
            <div class="panel-header" role="tab">
                <a data-toggle="collapse" class="panel-icon panel-spread"></a>
                <h3 data-toggle="collapse" class="panel-title" aria-expanded="true">操作记录</h3>
            </div>
            <div class="bk-tab2-pane p15">
                <table class="bk-table" id="warning-list">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>操作人</th>
                        <th>操作时间</th>
                        <th>操作内容</th>
                        <th>操作结果</th>
                        <th>输入参数</th>
                        <th>输出参数</th>
                    </tr>
                    </thead>
                    <tbody id="recordList">
                    </tbody>
                </table>
            </div>

            <div class="bk-table-pagination-wrapper">
                <div class="bk-table-pagination bk-page bk-page-align-right bk-page-small" style="float: right; margin-right: 40px">
                    <div class="bk-page-list-wrapper" style="float: right;">
                        <ul class="bk-page-list" id="tablePaging"></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div style="display: none" id="platform">{{ platform }}</div>
    <div style="display: none" id="oper_method">{{ oper_method }}</div>

{% endblock %}

{% block extra_block %}
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/kendoui-2015.2.624/js/kendo.all.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/bkMessage-1.0/js/bkMessage.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.css">
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/validate-1.14.0/js/jquery.validate.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"></script>

    <script>
        $.fn.dataTable.ext.errMode = 'none';

        var page_size = 20;
        get_record_lists(1);
        // 操作记录
        function get_record_lists(page) {
            $.ajax({
                url: "{{ SITE_URL }}record_lists/",
                method: "post",
                dataType: "json",
                data: JSON.stringify({
                    "start": page, "length": page_size
                }),
                success: function (data) {
                    var html = ``;
                    data.data.results.forEach(function (item) {
                        html += `<tr>
                            <td>${item.id}</td>
                            <td>${item.operator}</td>
                            <td>${item.operate_time}</td>
                            <td>${item.operate_action}</td>
                            <td>${item.operate_status}</td>
                            <td>${item.input_params}</td>
                            <td>${item.output_params}</td>
                            </tr>`;
                    })
                    document.getElementById("recordList").innerHTML = html;

                    renderPaging(Math.ceil(data.data.total / page_size), page);
                }
            });
        }

        function renderPaging(pageSize, currentPage) {
            var subPaging = "";
            if (pageSize <= 6) {
                for (let i = 0; i < pageSize; i++) {
                    var iscurPage = "";
                    if ((i + 1) === currentPage) iscurPage = "cur-page";
                    subPaging += `<li class="page-item ${iscurPage}" value="${i + 1}"><a href="javascript:void(0);" class="page-button">${i + 1}</a></li>`;
                }
            } else {
                var iscurPage1 = "";
                if (1 === currentPage) iscurPage1 = "cur-page";
                subPaging += `<li class="page-item ${iscurPage1}" value="1"><a href="javascript:void(0);" class="page-button">1</a></li>`;


                if (currentPage < 5) {
                    for (let j = 2; j < 6; j++) {
                        var iscurPage2 = "";
                        if (j === currentPage) iscurPage2 = "cur-page";
                        subPaging += `<li class="page-item ${iscurPage2}" value="${j}"><a href="javascript:void(0);" class="page-button">${j}</a></li>`;
                    }
                    subPaging += `<li class="page-item" value="-3"><a href="javascript:void(0);" class="page-button">···</a></li>`;
                } else if (currentPage >= 5 && (pageSize - 5) < currentPage) {
                    subPaging += `<li class="page-item" value="-2"><a href="javascript:void(0);" class="page-button">···</a></li>`;

                    for (let j = pageSize - 5; j < pageSize; j++) {
                        var iscurPage2 = "";
                        if (j === currentPage) iscurPage2 = "cur-page";
                        subPaging += `<li class="page-item ${iscurPage2}" value="${j}"><a href="javascript:void(0);" class="page-button">${j}</a></li>`;
                    }
                } else {
                    subPaging += `<li class="page-item" value="-2"><a href="javascript:void(0);" class="page-button">···</a></li>`;

                    for (let j = currentPage - 2; j < currentPage + 3; j++) {
                        if (j !== pageSize) {
                            var iscurPage2 = "";
                            if (j === currentPage) iscurPage2 = "cur-page";
                            subPaging += `<li class="page-item ${iscurPage2}" value="${j}"><a href="javascript:void(0);" class="page-button">${j}</a></li>`;
                        }
                    }

                    subPaging += `<li class="page-item" value="-3"><a href="javascript:void(0);" class="page-button">···</a></li>`;
                }

                var iscurPage3 = "";
                if (pageSize === currentPage) iscurPage3 = "cur-page";
                subPaging += `<li class="page-item ${iscurPage3}" value="${pageSize}"><a href="javascript:void(0);" class="page-button">${pageSize}</a></li>`;
            }

            var isDisabledLiLeft = "";
            var isDisabledLiRight = "";
            if (parseInt(currentPage) === 1) isDisabledLiLeft = "disabled";
            if (pageSize === currentPage) isDisabledLiRight = "disabled";

            var pagingHTML = `<li class="page-item ${isDisabledLiLeft}" value="0">
                <a href="javascript:void(0);" class="page-button">
                    <i class="bk-icon icon-angle-left"></i>
                </a>
            </li>
            ${subPaging}
            <li class="page-item ${isDisabledLiRight}" value="-1">
                <a href="javascript:void(0);" class="page-button">
                    <i class="bk-icon icon-angle-right"></i>
                </a>
            </li>`;
            document.getElementById("tablePaging").innerHTML = pagingHTML;

            $(".page-item").click(function () {
                var page = $(this).attr('value');
                $(".page-item").removeClass("cur-page");
                $(this).attr("class", "page-item cur-page");
                if (!page && currentPage === 1)
                    page = 1;
                else if (!page && currentPage > 1)
                    page = currentPage - 1;
                else if (page === -1 && currentPage !== pageSize)
                    page = currentPage + 1;
                else if (page === -1 && currentPage === pageSize)
                    page = currentPage;
                else if (page === -2)
                    page = currentPage - 5;
                else if (page === -3)
                    page = currentPage + 5;
                get_record_lists(page);
            });
        }
    </script>
{% endblock %}